%centerBox {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.paper {
    @extend %centerBox;
    display: block;
    overflow: hidden;
    position: fixed;

    &.A4 {
        width: 297mm;
        height: 210mm;
        box-shadow: 0 0 4px #3b3b3b;
        background-color: #fff;

        .origin {
            width: 9mm;
            height: 9mm;
            background-color: black;
        }
    }

    &.A5 {
        width: 210mm;
        height: 148mm;
        box-shadow: 0 0 4px #3b3b3b;
        background-color: rgb(255, 255, 0);

        .origin {
            width: 17mm;
            height: 17mm;
            background-color: rgb(0, 0, 255);
        }
    }

    .origin {
        @extend %centerBox;
        display: block;
        overflow: hidden;
        position: relative;
        border-radius: 50%;
    }
}

.panel_box {
    display: block;
    overflow: hidden;
    position: relative;
    font-size: 10px;
    max-width: 100em;
    margin: 0 auto;
}

.ShultGrid {
    display: block;
    overflow: hidden;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -moz-box-shadow: 0 0 4px #b5b1b1;
    box-shadow: 0 0 4px #b5b1b1;
    background-color: #fff;
    font-size: 10px;
    padding: 1.5em;
    box-sizing: border-box;

    &.selected_size {
        position: fixed;
        left: 50%;
        bottom: 0;
        -webkit-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        z-index: 4;
    }

    @mixin LevitationZone_base($LevitationZone_position: 'left') {
        overflow: visible;
        position: fixed;
        top: 50%;
        @if $LevitationZone_position == 'left' {
            left: 0;
        }
        @if $LevitationZone_position == 'right' {
            right: 0;
        }
        z-index: 3;
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);

        .closeBtn {
            display: block;
            overflow: hidden;
            position: absolute;
            top: 50%;
            z-index: 0;
            cursor: pointer;
            color: #a39b9b;
            padding: .3em;
            background-color: #fff;
            -moz-box-shadow: 0 0 4px #b5b1b1;
            box-shadow: 0 0 4px #b5b1b1;
            font-size: 4em;

            @if $LevitationZone_position == 'left' {
                right: 0;
                -webkit-transform: rotateY(180deg) translate(-100%, -50%);
                -moz-transform: rotateY(180deg) translate(-100%, -50%);
                -ms-transform: rotateY(180deg) translate(-100%, -50%);
                transform: rotateY(180deg) translate(-100%, -50%);
            }
            @if $LevitationZone_position == 'right' {
                left: 0;
                -webkit-transform: translate(-100%, -50%);
                -moz-transform: translate(-100%, -50%);
                -ms-transform: translate(-100%, -50%);
                transform: translate(-100%, -50%);
            }
        }

        &:before {
            content: '';
            width: 100%;
            height: 100%;
            display: block;
            background: #fff;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
        }

        &.hide {
            @if $LevitationZone_position == 'left' {
                right: 100%;
                left: unset;
            }
            @if $LevitationZone_position == 'right' {
                right: unset;
                left: 100%;
            }

            .closeBtn {
                @if $LevitationZone_position == 'left' {
                    -webkit-transform: translate(100%, -50%);
                    -moz-transform: translate(100%, -50%);
                    -ms-transform: translate(100%, -50%);
                    transform: translate(100%, -50%);
                }
                @if $LevitationZone_position == 'right' {
                    -webkit-transform: rotateY(180deg) translate(100%, -50%);
                    -moz-transform: rotateY(180deg) translate(100%, -50%);
                    -ms-transform: rotateY(180deg) translate(100%, -50%);
                    transform: rotateY(180deg) translate(100%, -50%);
                }
            }
        }
    }

    &.LevitationZone_Right {
        @include LevitationZone_base('right');
    }

    &.LevitationZone_Left {
        @include LevitationZone_base('left');
    }

    &.main {
        min-height: 100%;
        min-height: 100vh;
        z-index: 1;
    }

    .time {
        text-align: center;
        font-size: 1.6em;
        height: 3.6em;
        font-family: microsoft yahei;
        line-height: 3.6em;
        background-color: #ecfce6;
        width: 14em;
        border-radius: .6em;
        margin: 1em auto 3em;
        color: #20a53a;
        font-weight: bold;
        user-select: none;

        .value {
            text-align: center;
            display: inline-block;
        }
    }

    .table {
        cursor: pointer;
        list-style: none;
        width: auto;
        height: auto;
        padding: 0;
        user-select: none;
        margin: 0 auto 4em;
        background-color: #fff;
        display: inline-block;
        overflow: hidden;
        position: relative;
        left: 50%;
        -webkit-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        border: 1px solid #b5b1b1;
        -moz-box-shadow: 0 0 4px #b5b1b1;
        box-shadow: 0 0 4px #b5b1b1;

        .row {
            display: block;
            width: auto;
            overflow: hidden;

            $grid_width: 9em;

            .grid {
                display: block;
                border: 1px solid #b5b1b1;
                text-align: center;
                width: $grid_width;
                height: $grid_width;
                line-height: $grid_width;
                float: left;
                align-items: center;
                text-align: center;

                .number {
                    display: inline-block;
                    font-size: 2.2em;
                    list-style: 1em;
                    align-items: center;
                    text-align: center
                }

                &.selected,
                &:hover {
                    background: #eee;
                }
            }
        }
    }

    .control {
        text-align: center;

        .button {
            display: inline-block;
            border-radius: 4px;
            padding: 1em 2.6em;
            overflow: hidden;
            color: #fff;
            text-decoration: none;
            text-indent: 0;
            cursor: pointer;
            margin: 1em .6em;
            user-select: none;

            &.start {
                background: #53a8ff;
                border: 1px solid #53a8ff;
                -moz-box-shadow: 0 0 4px #53a8ff;
                box-shadow: 0 0 4px #53a8ff;
            }

            &.restart {
                background: #67c23a;
                border: 1px solid #67c23a;
                -moz-box-shadow: 0 0 4px #67c23a;
                box-shadow: 0 0 4px #67c23a;
            }
        }
    }

    .choice {
        display: flex;
        padding: 1em 0;
        text-align: center;
        align-items: center;
        justify-content: center;
        align-content: center;
        z-index: 10;
        position: relative;
        margin-top: 1.5em;

        .item {
            font-size: 2em;
            display: inline-block;
            background-color: #effceb;
            color: #20a53a;
            width: 6em;
            height: 2.8em;
            line-height: 2.8em;
            display: inline-block;
            text-align: center;
            font-weight: bold;
            border-radius: .8em;
            margin: .5em;
            -moz-box-shadow: 0 0 4px #20a53a;
            box-shadow: 0 0 4px #20a53a;

            &:hover {
                text-decoration: none;
                background-color: #e5f7e0;
                cursor: pointer;
            }
        }
    }

    .introduce {
        display: flex;
        width: auto;
        box-sizing: border-box;
        z-index: 10;
        position: relative;
        min-width: 25em;

        .example {
            width: 30em;
            border: 1px solid #ddd;
            border-radius: 12px;
            text-align: center;
            overflow: hidden;
            margin: 4em auto 0;

            .img {
                background: #f7fff4;
                color: inherit;
                user-select: none;
                -webkit-user-drag: none;
                width: 100%;
            }
        }

        .describe {
            width: auto;
            padding: 0 5%;

            .span {
                display: block;
                font-size: 1.6em;
                color: #777;
                padding-bottom: 0.7em;

                &.title {
                    display: block;
                    color: #67c23a;
                    margin-top: 1em;
                    font-size: 2.4em;
                }
            }

            .score_content {
                .span {
                    &.title {
                        margin-top: 0;
                    }
                }
            }
        }
    }
}
